<template>
	<!-- 余额明细 -->
	<view class="balanceDetail-main">
		<view class="balanceInfo">
			<image src="https://test-zyxx-img.oss-cn-shenzhen.aliyuncs.com/uploads/20241214/6b0a217ddcaab62488ded19d224d539a.png" mode="widthFix" style="width: 100rpx"></image>
			<view class="balanceNum">
				<text style="font-size: 12px">￥</text>
				{{ formatAmounts(balanceValue) }}
			</view>
			<view class="balanceBtn">余额提现</view>
		</view>

		<view class="balanceList">
			<view class="balanceList-header">余额变更明细</view>
			<view v-if="userBalanceLogData.length > 0">
				<view class="balanceItem" v-for="(item, index) in userBalanceLogData" :key="item.id">
					<view class="balances">
						<view class="name">
							{{ item.memo }}
						</view>
						<view class="des">
							<text style="padding-right: 5px">变更余额：￥{{ formatAmounts(item.before) }}</text>
							<text>目前余额：￥{{ formatAmounts(item.after) }}</text>
						</view>
						<view class="time">
							{{ formatTimestamps(item.createtime) }}
						</view>
					</view>
					<view class="pic" :class="[Number(item.money) > 0 ? 'add' : 'reduction']">{{ Number(item.money) > 0 ? '+' + item.money : item.money }}元</view>
				</view>
			</view>
			<u-empty mode="list" v-else icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
		</view>
	</view>
</template>

<script>
import { userBalanceLog, userNumCount } from '../../api/home/index.js';
import { formatAmount, formatTimestamp } from '../../utils/tools.js';
export default {
	data() {
		return {
			userBalanceLogForm: {
				page: 1,
				limit: 30,
				keyword: ''
			},
			balanceValue: '',
			userBalanceLogData: []
		};
	},
	async onLoad() {
		await this.getuserNumCount();
		await this.getuserBalanceLog();
	},
	methods: {
		async getuserBalanceLog() {
			try {
				const resData = await userBalanceLog(this.userBalanceLogForm);
				this.userBalanceLogData = resData.data.data;
			} catch (e) {
				throw Error(e);
			}
		},

		// 获取余额
		async getuserNumCount() {
			try {
				const resData = await userNumCount();
				const orderNum = resData.data;
				if (orderNum.money == '0.00') {
					this.balanceValue = '0.00';
					return false;
				}
				this.balanceValue = orderNum.money;
			} catch (e) {
				throw Error(e);
			}
		},

		formatAmounts(val) {
			return formatAmount(Number(val));
		},

		formatTimestamps(val) {
			return formatTimestamp(val);
		}
	}
};
</script>

<style>
page {
	background-color: #fff;
}
</style>

<style scoped lang="scss">
.balanceInfo {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 50rpx 0;
	.balanceNum {
		margin: 15rpx 0px 25rpx 0px;
		font-size: 28rpx;
		color: #999;
	}

	.balanceBtn {
		height: 65rpx;
		width: 240rpx;
		border-radius: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		background-color: #07c160;
		font-size: 28rpx;
	}
}

.balanceList {
	font-size: 26rpx;
	color: #444;
	.balanceList-header {
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;
		background-color: #f3f3f3;
	}
	.balanceItem {
		box-sizing: border-box;
		padding: 25rpx;
		border-bottom: 1px #f3f3f3 solid;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		.balances {
			.name {
				font-weight: bold;
				font-size: 28rpx;
			}
			.des {
				margin: 10rpx 0px;
			}
			.time {
				font-size: 24rpx;
				color: #999;
			}
		}
		.pic {
			font-weight: bold;
		}

		.add {
			color: #07c160;
		}

		.reduction {
			color: #e43927;
		}
	}
}
</style>
